import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  trigger,
  state,
  style,
  transition,
  animate
} from "@angular/core";
import { Observable } from "rxjs/Observable";
import { Subject } from "rxjs/Subject";
import { CmHttp } from "http-module";
// import "rxjs/add/operator/toPromise";
import { getStockType, TOGGLE_STATE } from "utils";
import { BroadcastService, BROADCAST_TYPE, BROADCAST_CLASSIC_PAYLOAD } from "broadcast";
import { BASEURL } from "shared";

// export const STOCK_TYPE_STOCK = 0;
// export const STOCK_TYPE_INDEX = 1;
// export const STOCK_TYPE_BLOCK = 2;

@Component({
  // moduleId: module.id,
  selector: "stock-combo",
  templateUrl: "stock-combo.component.html",
  styleUrls: ["stock-combo.component.less"],
  inputs: [
    "stockSource",
    "stockType"
  ],
  animations: [
    trigger("expandable", [
      state(TOGGLE_STATE.COLLAPSED,
        style({
          height: 0,
          display: "none"
        })
      ),
      state(TOGGLE_STATE.EXPANDED,
        style({
          height: "*"
        })
      ),
      transition(TOGGLE_STATE.COLLAPSED + " <=> " + TOGGLE_STATE.EXPANDED, [
        animate("200ms")
      ])
    ])
  ]
})
export class StockComboComponent implements OnInit {
  // @Input() currentStock: string;
  @Output() tabClick = new EventEmitter();
  currentStockSource = new Subject();
  stockType;
  outlookState = {
    "stock": TOGGLE_STATE.COLLAPSED
  };

  tabList = [
    {
      key: "news",
      text: "新闻",
      isShow: true
    },
    {
      key: "notices",
      text: "公告",
      isShow: true
    },
    {
      key: "reports",
      text: "研报",
      isShow: true
    //},
    //{
    //  key: "fund",
    //  text: "资金",
    //  isShow: true
      // }, {
      //   key: "trade",
      //   text: "交易",
      // isShow: true
    },
    {
      key: "block",
      text: "板块",
      isShow: true
    },
    {
      key: "tick",
      text: "明细",
      isShow: true
    }
  ];
  // 默认选中列表一个项
  currentTab = this.tabList[0];

  stockSource: Observable<any>;

  constructor(
    private http: CmHttp,
    private broadcast: BroadcastService
  ) { }

  ngOnInit() {
    // this.stockSource.filter(req => !!req.symbol)
    //   .switchMap(req => this.http.get(`${BASEURL}/stock/symbol2blocks/${req.symbol}`))
    //   .subscribe(data => {
    //     console.log('symbol2blocks data:', data);
    //     this.tabList.map(tab => tab.isShow = true);
    //   },
    //   err => {
    //     console.info("symbol2blocks err: ", err.json());  // errCode, errDesc
    //     this.tabList.map(tab => tab.key === "block" ? tab.isShow = false : tab);
    //     // this.currentTab = this.currentTab && this.currentTab.key === "block" ? this.tabListNoBlock[0] : this.currentTab;
    //   });

    // this.stockSource.switchMap(stock =>
    //   this.http.get(`${BASEURL}/stock/summaries/${stock["symbol"]}`))
    //   .subscribe(stockSummary => {
    //     console.debug("StockType: ", stockSummary, getStockType(stockSummary));
    //     this.stockType = getStockType(stockSummary);
    //   });


    // 改变bottom状态
    this.broadcast.broadcast
      .filter(e => e.type === BROADCAST_CLASSIC_PAYLOAD.TOGGLE_BOTTOM)
      .subscribe(e => {
        // console.debug("Socket Toggle: ", e);
        this.outlookState.stock = e.payload;
        // console.log(this.outlookState.stock);
        // if (e.payload === "EXPANDED"){
        //   document.getElementsByClassName("icon-down")[0].click();
        // }
      });
  }

  toggleState(stateName: string) {
    console.debug("Toggle State: ", stateName);
    if (!stateName || !this.outlookState || !this.outlookState[stateName]) return;
    this.outlookState[stateName] = this.outlookState[stateName] === TOGGLE_STATE.COLLAPSED ? TOGGLE_STATE.EXPANDED : TOGGLE_STATE.COLLAPSED;
    this.broadcast.broadcast.next({
      type: BROADCAST_CLASSIC_PAYLOAD.TOGGLE_BOTTOM,
      payload: this.outlookState.stock
    });
  }
  broadcastRender() {
    this.broadcast.broadcast.next({
      type: BROADCAST_TYPE.RENDER_CHAERT
    });
  }

  onClick(tab) {
    this.currentTab = tab;
    this.outlookState.stock = "EXPANDED";
    this.broadcast.broadcast.next({
      type: BROADCAST_CLASSIC_PAYLOAD.TOGGLE_BOTTOM,
      payload: this.outlookState.stock
    });
    switch (tab) {
      case "info":
        this.currentStockSource.next(this.stockSource);
        break;
    }
  }
}